<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script src="echarts.min.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1200px;height: 1080px;margin: 0 auto;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));


        myChart.showLoading();

        $.get('HK.json', function (geoJson) {

            myChart.hideLoading();

            echarts.registerMap('HK', geoJson);

            myChart.setOption(option = {
                title: {
                    text: '香港18区人口密度 （2011）',
                    subtext: '人口密度数据来自Wikipedia',
                    sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 800,
                    max: 50000,
                    text:['High','Low'],
                    realtime: false,
                    calculable: true,
                    color: ['orangered','yellow','lightskyblue']
                },
                series: [
                    {
                        name: '香港18区人口密度',
                        type: 'map',
                        mapType: 'HK', // 自定义扩展图表类型
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name: '中西区', value: 207.34}

                        ],
                        // 自定义名称映射
                        nameMap: {
                            'Central and Western': '中西区'
                        }
                    }
                ]
            });
        });

    </script>
</body>
</html>